<template>
  <div>
    <el-container direction="vertical">
      <el-header height="150px">
        <!-- Header content -->
        <h1 class="header">
          呼和浩特市发展和改革委员会储备项目调度管理操作平台
        </h1>
      </el-header>
      <el-main height="auto">
        <div class="logindiv">
          <div class="loginform">
            <el-form :model="user" ref="form" label-width="80px" size="normal">
              <el-form-item label="登录名">
                <el-input v-model="user.adminAccountNumber"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="pwd" show-password></el-input>
              </el-form-item>

              <div class="check">
                <el-form-item>
                  <el-checkbox v-model="checked">记住密码</el-checkbox>
                </el-form-item>
              </div>
              <div class="submitBtn">
                <el-form-item>
                  <el-button type="primary" size="default" @click="login"
                    >登录
                  </el-button>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
      </el-main>
      <el-footer height="">
        <!-- Footer content -->
      </el-footer>
    </el-container>
    <!-- 
    <el-select
      v-model="value"
      placeholder="测试"
      clearable
      filterable
      @change="change"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.name"
        :value="item.value"
      >
      </el-option>
    </el-select> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      pwd:'',
      user: {
        adminAccountNumber: "",
        adminPassword: "",
      },
      power: "",
      checked: false,
      pathlink: "",
      // options: [
      //   { value: "admin", name: "系统管理" },
      //   { value: "staff", name: "普通员工" },
      //   { value: "leader", name: "领导" },
      // ],
      // value: "",
    };
  },
  computed: {},
  methods: {
    change() {
      this.power = this.value;
    },
    async login() {
      // let param = new URLSearchParams();
      // param.append("username", this.user.username);
      // param.append("password", this.user.password);
      await this.$http
        .get("/admin/getRsa")
        .then((result) => {
          console.log(result);
          this.user.adminPassword = this.$encryptionData(
            result.data,
            this.pwd
          );
          this.$http
            .post("/admin/login", this.user)
            .then((res) => {
              console.log(res.data);
              // console.log(this);
              if (res.data.data.adminPower == 0) {
                this.$router.replace({
                  name: "admin",
                  params: {
                    power: 1,
                  },
                });
              }
              if (res.data.data.adminPower == 1) {
                this.$router.replace({
                  name: "staff",
                  params: {
                    power: 3,
                  },
                });
              }
              if (res.data.data.adminPower == 2) {
                this.$router.replace({
                  name: "staff",
                  params: {
                    power: 2,
                  },
                });
              }
              sessionStorage.setItem("user", JSON.stringify(res.data.data));
              // console.log( JSON.parse (sessionStorage.getItem("user")) );
            })
            .catch((err) => {
              console.log(this.user);

              console.log(err);
            });
        })
        .catch((err) => {
          console.log(err);
        });

      //TEST
      // if (this.power == "admin") {
      //   this.$router.push({
      //     name: "admin",
      //     params: {
      //       power: 1,
      //     },
      //   });
      // }
      // if (this.power == "staff") {
      //   this.$router.push({
      //     name: "staff",
      //     params: {
      //       power: 3,
      //     },
      //   });
      // }
      // if (this.power == "leader") {
      //   this.$router.push({
      //     name: "staff",
      //     params: {
      //       power: 2,
      //     },
      //   });
      // }
    },
  },
  created() {
   
  },
};
</script>

<style>
.header {
  position: relative;
  color: #d6d7d8;
  text-align: center;
  font-size: 32px;
  margin: 0px;

  bottom: -108px;
}
.el-form-item {
  margin-bottom: 11px !important;
}
.logindiv {
  position: relative;
  width: 370px;
  height: 300px;
  margin: 25px auto;
  background-color: rgba(255, 255, 255, 30%);
}
.loginform {
  width: 270px;
  height: 157px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0px auto;
}
.loginform .el-form-item__label {
  color: white;
  padding: 0px;
  text-align: center;
  background-image: linear-gradient(#d8efff, #3152ff);
}
.loginform .el-input__inner {
  border-radius: 0px !important;
}
.submitBtn .el-button {
  width: 100%;
}

.submitBtn .el-form-item__content {
  margin: 0px !important;
}
.check .el-form-item__content {
  line-height: 20px;
  float: right;
}
</style>